<template>
    <div class="infinite-list-wrapper"
         v-infinite-scroll="load"
         style="overflow:auto">
        <div class="image-flex">
            <div class="add-icon common"
                 @click="isAddPoster = true">
                <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
            <div v-for="(item,index) in imageList"
                 @click="previewImage(item)"
                 class="image-container common"
                 :key="index">
                <el-image :src="item.url"></el-image>
                <div class="delete-icon"
                     @click.stop="deletePoster(item)">
                    <i class="el-icon-delete-solid"></i>
                </div>
                <div class="image-title">{{item.title}}</div>
            </div>
        </div>
        <p v-if="loading">加载中...</p>
        <el-dialog title="设置海报"
                   :visible.sync="isAddPoster"
                   width="30%">
            <add-poster ref="addRef"
                        v-if="isAddPoster"
                        @submit="initData"
                        @close="isAddPoster = $event" />
        </el-dialog>
        <el-dialog :visible.sync="isPreviewVisible"
                   append-to-body>
            <img width="100%"
                 v-if="isPreviewVisible"
                 :src="dialogImageUrl"
                 alt />
        </el-dialog>
    </div>

</template>

<script>

import AddPoster from './AddPoster'

export default {
    data() {
        return {
            isPreviewVisible: false,
            dialogImageUrl: '',
            isAddPoster: false,
            count: 10,
            loading: false,
            imageList: [],
            param: {
                queryRequest: {
                    pageSize: 100,
                    pageNum: 1
                }
            }
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            this.isAddPoster = false
            this.$service.getPosterList(this.param)
                .then(res => {
                    this.imageList = res.data.rows || []
                    this.imageList.reverse()
                })
        },
        uploadFile(file) {
            this.$service.uploadFileFunction(file, (result) => {
                this.imageList.push({
                    url: result.url,
                })
            })
        },
        previewImage(item) {
            this.dialogImageUrl = item.url
            this.isPreviewVisible = true
        },
        //删除图片
        deletePoster(param) {
            this.$confirm('是否删除选中图片', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$service.deletePoster({ id: param.id })
                    .then(res => {
                        if (res.code == '00000') {
                            this.initData()
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }

                    })

            })
        },
        load() {
            this.loading = false
        },
    },
    components: {
        'add-poster': AddPoster
    }
}
</script>

<style lang="scss">
.image-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    .common {
        margin-top: 10px;
        margin-right: 10px;
    }
}

.add-icon {
    width: 200px;
    height: 200px;
    border: 1px dashed #d9d9d9;
    margin-bottom: 40px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
        font-size: 28px;
        color: #8c939d;
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
}

.image-container {
    width: 200px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #909399;
    position: relative;
    .el-image {
        width: 200px;
        height: 200px;
    }
    .image-title {
        width: 80%;
        height: 40px;
        line-height:40px;
        text-align:center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    
    }
    .delete-icon {
        position: absolute;
        color: #fff;
        border-bottom-left-radius: 5px;
        background-color: rgba(0, 0, 0, .6);
        right: 0;
        top: 0;
        width: 30px;
        height: 30px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>